<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title><%= title%></title>
    <link href="layout.css" rel="stylesheet" type="text/css">
	<link type="text/css"   rel="stylesheet" href="/files/css/jquery.jqplot.css" />
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/files/js/excanvas.min.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="/files/js/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="/files/js/jquery.flot.js"></script>

  <!-- BEGIN: load jqplot -->
  <script language="javascript" type="text/javascript" src="/files/js/jquery.jqplot.js"></script>
  <script language="javascript" type="text/javascript" src="/files/js/plugins/jqplot.dateAxisRenderer.js"></script>
  <!-- END: load jqplot -->
  
  <style type="text/css" media="screen">
    .jqplot-axis {
      font-size: 0.85em;
    }
  </style>
  <script type="text/javascript" language="javascript">
	$(document).ready(function(){
		$.jqplot.config.enablePlugins = true;
		line_1day = [
				<% list.each do |key,value| %>
				['<%=key%>', <%=value%>],
				<% end %>
		];
		
		line_1mth = [
				<% list_m.each do |key,value| %>
				['<%=key%>', <%=value%>],
				<% end %>
		];
		
		draw_graph = function(id, line, title, min, max, format){
			$.jqplot(id, [line], {
				title: title,
				seriesDefaults: {
					color:'#FF0000',
					lineWidth:1,
					showMarker:false
				},
				axes: {
					yaxis:{
						min: min,
						max: max,
						numberTicks:5
					},
					xaxis: {
						renderer: $.jqplot.DateAxisRenderer,
						tickOptions:{formatString: format},
						numberTicks: 5
					}
				},
			});
		}
		draw_graph('chart_1day' , line_1day, '1 day'             , 0, <%= y_max %>                             , '%H:%M');
		draw_graph('chart_1day2', line_1day, '1 day (max=1000)'  , 0, <%= [[1000, y_max].min, y_min].max %>    , '%H:%M');
		draw_graph('chart_1mth' , line_1mth, '1 month'           , 0, <%= y_max_m %>                           , '%Y-%m-%d');
		draw_graph('chart_1mth2', line_1mth, '1 month (max=1000)', 0, <%= [[1000, y_max_m].min, y_min_m].max %>, '%Y-%m-%d');
  });
  </script>
  <style type="text/css">
  <!--
  .graph{
	  margin-top:20px;
	  margin-left:20px;
	  width:800px;
	  height:150px;
	  font-size : 10pt
  }
  -->
  </style>
  </head>
  <body>
    <h1><%= title%></h1>
    <div id="chart_1day"  class="graph"></div>
    <div id="chart_1day2" class="graph"></div>
    <div id="chart_1mth"  class="graph"></div>
    <div id="chart_1mth2"  class="graph"></div>
	<div>
	  <p>最近のエラー</p>
	  <ul>
	  </ul>
	</div>
	<a href="/">TOPへ</a>
	</body>
</html>
